<template>
  <div>
    <el-row type="flex" class="row-st" justify="space-between">
      <el-col :span="3" style="text-align:left"><i id="asidesbut" @click="change_aside()" class="el-icon-s-fold"></i></el-col>
      <el-col :span="6">
        <div id="right_user">
          <img id="icons" @click="fullsc()" :src="fullscreenicons" />
          <div id="user">
            <img id="user_avatar" src="../assets/user.jpg" />
            {{username}}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-tag v-for="(item,index) in items"
              :key="item.id"
              :type="item.type"
              style=" cursor: pointer;"
              closable
              @close="del(index)"
              @click="gotopage(index)"
              effect="plain">
        {{ item.label }}
      </el-tag>

    </el-row>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  import fullscreen from "../assets/fullscreen.png"
  import escfullscreen from "../assets/escfullscreen.png"
  export default {
    data() {
      return {
        username: "Chino",
        fullscreenicons: fullscreen,
        status: false,
        count: 0,
        items: []
      }
    },
    methods: {
      change_aside() {
        var f = document.getElementById("asidesbut");
        if (f.className == "el-icon-s-fold") {
          console.log(f.className)
          eventBus.$emit('test');
          setTimeout(function () { f.className = "el-icon-s-unfold" }, 600);
        }
        else {
          console.log(f.className)
          eventBus.$emit('back');
          setTimeout(function () { f.className = "el-icon-s-fold" }, 600);
        }
      },
      fullsc() {
        var ele = document.body;
        if (this.status) {
          this.exitScreen();
          this.fullscreenicons = fullscreen;
        }
        else {
          this.requestFullScreen(ele);
          this.fullscreenicons = escfullscreen;
        }
      },
      requestFullScreen(element) {
        this.status = true;
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
          requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== "undefined") {
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript !== null) {
            wscript.SendKeys("{F11}");
          }
        }
      },
      exitScreen() {
        this.status = false;
        var el = document;
        var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
        if (cfs) {
          cfs.call(el);
        }
        else if (typeof window.ActiveXObject !== "undefined") {
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript != null) {
            wscript.SendKeys("{F11}");
          }
        }
      },
      gotopage(index) {
        this.$router.push(this.items[index].href);
      },
      del(index) {
        this.items.splice(index, 1)
      }
    },
    mounted() {
      eventBus.$on('adds', (href,txt) => {
        this.items.push({
          id: this.count,
          type: 'info',
          href: href,
          label: txt,
        })
        this.count++;
      })
    }
  }
</script>
<style scoped>
  .el-tag {
    margin: 0 5px;
  }

  #user_avatar {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 10px;
  }

  #user {
    display: flex;
    font-size: 16px;
    align-items: center;
    border-bottom: 2px solid #03bbf8;
    height: 58px;

  }

  #icons {
    margin-right: 20px;
    width: 24px;
    height: 24px;
  }

  #right_user {
    display: flex;
    height: 60px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }

  .el-row {
    padding: 0 20px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .el-col {
    font-size: 30px;
  }

  .row-bg {
    background-color: #fff;
    height: 50px;
  }

  .row-st {
    background-color: #fff;
    height: 60px;
  }
</style>
